<template>
  <div class="scrollable-div scroll-wrapper">
    <div class="header">
      <p style=" font-size: 25px;padding-top: 50px;">{{discuss.title}}</p>
      <p class="date" style="padding-top: 50px;">
        <span> <i class="el-icon-date"></i>发布日期: {{LocalTime(discuss.createTime)}}</span>
        <span><i class="el-icon-user"></i>提问人: {{discuss.author}}</span>
        <span ><i class="el-icon-star-on"></i>收藏人数: {{ collect }}</span>
        <span style="cursor: pointer" @click="addCollect">(点击收藏)</span>
      </p>
    </div>
    <div class="content">
      <Answer v-for="comment in commentList" :comment="comment" ></Answer>
    </div>
    <div class="comment">
      <Comment :id="this.id"></Comment>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment";
import LocalTime from "@/timeZone/index.js";
import bus from "@/assets/js/bus";
import Answer from "@/components/Answer";
import axios from "axios";
export default {
  name: "Discuss",
  components: {Answer,Comment},
  data(){
    return{
      discuss:{},
      commentList:[],
      collect:''
    }
  },
  methods: {
    //初始化讨论
    initDiscuss(){
      axios.get('/FinancialRecommend/discuss/query?discussId='+this.id)
      .then(response => {
        this.discuss = response.data.data
      })
    },
    initComment(){
      axios.get('/FinancialRecommend/discuss/queryComment?discussId='+this.id)
      .then(response => {
        this.commentList = response.data.data
      })
    },
    //收藏人数查询
    getCollect(){
      axios.get('/FinancialRecommend/discuss/collect?discussId='+this.id)
      .then(response => {
        console.log(response)
        this.collect = response.data.data
      })
    },
    LocalTime(time){
      return LocalTime(time)
    },
    addCollect(){
      axios.get('/FinancialRecommend/discuss/addCollect?userId='+localStorage.getItem("UID")+'&discussId='+this.id)
        .then(response => {
          this.getCollect()
          //TODO 这里有一点小问题，以后再修改吧~~
          let type = ''
          if (response.status === 200){
            type = 'success'
          }else {
            type = 'warning'
          }
          this.$message({
            message: response.data.msg,
            type: type
          })
        })
    }
  },
  computed: {
    id(){
      return this.$route.params.id
    }
  },
  watch: {
    id(){
      this.initDiscuss()
      this.initComment()
      this.getCollect()
    }
  },
  created() {
    this.initDiscuss()
    this.initComment()
    this.getCollect()
    // 监听刷新评论的事件
   bus.$on('refresh-comments',()=> {
     this.initComment()
   })
  }
}
</script>

<style lang="less" scoped>
.scroll-wrapper {
  margin: 0 auto;
  height: 685px; /* Set the height of your scrollable div */
  width: 900px;
  overflow-y: auto; /* Enable vertical scrollbar when content overflows */
  //border-right: 1px solid black
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.scroll-wrapper::-webkit-scrollbar{
  display: none;
}
.scrollbar-wrap {
  overflow: auto; /* 显示滚动条 */
  width: 336px;
  height: 90vh;
  background-color: skyblue;
}
.header{
  height: 200px;
  //background-color: red;
  text-align: center;
  padding: 0 100px;
  //box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
p{
  font-family: "钉钉进步体 Regular";
  font-weight: bolder;
  user-select: none;
}
.date{
  font-size: 15px;
  font-weight: lighter;
}
span{
  margin-right: 10px;
}
.content{
  //min-height: 400px;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  font-weight: lighter;
  p{
    text-indent: 2em;
    line-height: 40px;
  }
}
.paragraph{
  margin-top: 10px;
  
}
.comment{
  //min-height: 400px;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  margin-top:-40px ;
}

</style>
